html,body{/*全屏--*/
	margin: 0px;
	width: 100%;
	height: 100% 
	
}
body{
	font-size:16px;
	overflow:hidden;
}
.my-main{/*底布*/
	width: 100%;
	height: 100%;
	background-color: rgb(234,233,111);
}

/*=========================================================*/
/*导航条*/
/*将body的滚动条去掉，将父盒子改为200%，方便显示隐藏时主界面的box可以往又移动*/
/*因为主盒子是200%，所以开关条的宽度+主显示的box宽度应该是50%*/
/*全部左浮动布局*/
/*=========================================================*/
.my-nav{/*导航条左侧*/
	height: 100%;
	width: 200%;
}
.my-nav-listgroup{
	height: 100%;
	background-color: rgba(111,222,333,0.4);
	float: left;
}
.my-nav-listgroup-item{/*选项列表*/
	display: block;
	height: 25%;/*4个25%*/
	margin-bottom: -1px;
  	background-color: #fff;
    border: 1px solid #ddd;
    width: 100%;
 	position: relative;
	padding-left: 1em;
	padding-right: 1em;
}
.my-nav-listgroup-item span,/*选项按钮里的字体*/
.my-nav-listgroup-item i{ /*选项按钮里的图标*/
	font-size: 2em;
	vertical-align:middle;
	line-height: 300%;
}
.my-nav-listgroup-item:hover{/*选项列表划过时*/
	text-decoration:none; 
	cursor:pointer;
	background-color: rgb(233,100,100);
}

.my-nav-listgroup-item:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.my-nav-listgroup-item:last-child {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.my-nav-toggle{
	/*开关条*/
	background-color: rgb(234,111,111);
	float: left;/*浮动*/
	width: 2%;
	border-radius: 8px;
	/*让里面的图标居中*/
	height: 100%;
	position: relative;
}
.my-nav-toggle > span{/*开关条下的图标*/
	position: absolute;
	top:50%;
	left: 50%;
	font-size: 2em;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
/*=========================================================*/


/*主界面的css---*/
.my-main-show{
	float: left;
	height:100%;
	width: 48%;/*与.my-nav-toggle的width关系*/
	display: inline-block;
}
